<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法：DOM（针对页面操作）+BOM（针对浏览器）
		     学习主体：针对页面操作比较多---DOM操作
			 JQuery操作DOM：理解：JQ框架改变页面内容效果
			 js基础就可以之间学习，了解函数使用
			 基础函数----事件源之后出现，事件源语法糖中
			 html()      作用：增加一个元素，覆盖原有html
			 val()       作用：针对input元素，实现修改文本框内容
			 text()      作用：生成为本内容
		-->
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: black;
			}
		</style>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque assumenda omnis officia, corrupti quasi facilis ipsam amet. Sit molestiae facilis, adipisci quos reiciendis, in deleniti officia necessitatibus, ea sint id!</p>
		
		<div></div>
		<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem corrupti quidem cupiditate officiis vero corporis repellendus distinctio fugiat! Laudantium cumque ad architecto alias recusandae asperiores aspernatur ullam suscipit labore error.</h3>
		
		<input type="button" value="按钮2" />
		<input type="text" value="输入框可以直接写文本"/>
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/* 练习：div 200*200 背景颜色：黑色，鼠标滑过之后，
			下面内容修改：<h3>提示，修改为黄颜色 */
			$("div").mouseenter(function(){
				$("h3").html("<h3>修改为黄色</h3>");
			});
			/* 练习： 按钮 文本框      点击按钮，文本增加一行文本 */
			$("input[type='button']").click(function(){
				//alert("JQ选择器是否选中")
				$("input[type='text']").val("文本框内容修改~")
			});
			/* 利用JQ操作DOM（页面效果）：1.元素内容操作（3个函数）
			                             html()
										 val()
										 text()
		                               2.属性操作（4个函数）
									     <p align="center">
										 attr()
										 removeAttr()
										 <input checked>
										 prop()
										 removeProp()
									   3.样式类名操作（4个函数）
									     .demo{属性：属性值..}
										 addClass()
										 removeClass()
										 toggleClass()
										 hasClass()
									   4.元素样式操作（5个函数）
									   	  css()
										  width()和height()
										  outerwidth()和
									   	  语法：css("css属性","css属性值"
									   	  $("选择器").attr().addClass
									   5.插入和删除操作（7个函数）
									   append()和prepend()
									   after()和before()
									   remove()和empty()
									   replaceWith()
									   元素遍历操作（6个函数）
									   JQ动画操作（7个函数）
			*/
		</script>
	</body>
</html>